<template>
  <div class='container'>
    <el-card>
      <!-- 筛选区域 -->
      <el-form ref="ruleForm" :model="filterData" label-width="80px">
        <!-- 按钮 -->
        <el-row type="flex" class="row-bg"  justify="end " style="margin-bottom:10px">
          <el-col :span="18"></el-col>
          <el-col :span="6">
            <el-button
            @click="$router.push('/questions/new')"
            type="success"
            icon="el-icon-edit"
            size="small"
            style="float:right">新增按钮</el-button>
          </el-col>
        </el-row>
        <!-- 第一行 -->
        <el-row type="flex" class="row-bg" justify="end">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select  v-model="filterData.subjectID" @click.native="getSubjects" @change="getDirectorys" placeholder="请选择" style="width:100%">
                <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" >
              <el-select  placeholder="请选择" v-model="filterData.catalogID" style="width:100%">
                <el-option
                v-for="item in directorysList"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select  placeholder="请选择" v-model="filterData.tags" style="width:100%">
                <el-option
                v-for="item in tagsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="filterData.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row type="flex" class="row-bg" justify="end">
          <el-col :span="6">
            <el-form-item label="试题类型" >
              <el-select v-model="filterData.questionType"  placeholder="请选择"  style="width:100%">
                <el-option
                v-for="item in questionList"
                :key="item.id"
                :label="item.type"
                :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" >
              <el-select v-model="filterData.difficulty" placeholder="请选择"  style="width:100%">
                <el-option
                v-for="item in difList"
                :key="item.id"
                :label="item.type"
                :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item  label="方向" >
              <el-select v-model="filterData.direction" placeholder="请选择"  style="width:100%">
                <el-option
                v-for="(item,index) in directionList"
                :key="index"
                :label="item"
                :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" >
              <el-select v-model="filterData.creatorID"  placeholder="请选择"  style="width:100%">
                <el-option
                v-for="item in usersList"
                :key="item.id"
                :label="item.username"
                :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row type="flex" class="row-bg" justify="end">
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="filterData.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="filterData.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select @change="choseCity" v-model="filterData.province"  placeholder="请选择" style="width:50%">
                <el-option
                v-for="(item,index) in  provincesList"
                :key="index"
                :label="item"
                :value="item"></el-option>
              </el-select>
              <el-select v-model="filterData.city" placeholder="请选择" style="width:50%">
                <el-option
                v-for="(item,index) in citysList"
                :key="index"
                :label="item"
                :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" >
            <div  style="float:right">
            <el-button  size="small" @click="resetForm">清除</el-button>
            <el-button type="primary" size="small" @click="search">搜索</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
        <!-- 数据统计 -->
        <el-row>
          <el-col :span="24" style="background: #e5e9f2;padding:10px; color:gray" >
            <i class="el-icon-warning" style="margin-right:10px"></i>数据一共{{count}}条
          </el-col>
        </el-row>
        <!-- 表格区域 -->
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="120"></el-table-column>
          <el-table-column prop="subject" label="学科" width="80"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="80"></el-table-column>
          <el-table-column prop="questionType" label="题型" width="80">
            <template #default='{row}'>
              {{questionList.filter(item => item.id === +row.questionType)[0].type}}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干">
            <template #default='{row}'>
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间">
            <template #default='{row}'>
              {{ row.addDate | parseTimeByString}}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="80">
            <template #default='{row}'>
              {{difList.filter(item => item.id === +row.difficulty)[0].type}}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="100"></el-table-column>
          <el-table-column label="操作">
            <template #default='{row}'>
              <el-button @click="view(row.questionType,row)" type="primary" plain icon="el-icon-view" circle size="mini"></el-button>
              <el-button @click="change(row.id)" type="info" plain icon="el-icon-edit" circle size="mini"></el-button>
              <el-button @click="showDelDia(row.id)" type="danger" plain icon="el-icon-delete" circle size="mini"></el-button>
              <el-button @click="check(row.id)" type="success" plain icon="el-icon-check" circle size="mini"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div style="float:right;margin-top:10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 7, 10, 15]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
          </el-pagination>
        </div>
    </el-card>
    <!-- 编辑弹窗 -->
    <dia ref="viewDia" :dialogVisible.sync='dialogVisible'></dia>
    <!-- 删除弹窗 -->
    <dia @render='render' ref="delDia" :delDialogVisible.sync='delDialogVisible'></dia>
    <!-- 加入精选弹窗 -->
    <dia @render='render' ref="selectDia" :selectDialogVisible.sync='selectDialogVisible'></dia>
  </div>
</template>

<script>
import { simple as subSimple } from '@/api/hmmm/subjects.js'
import { simple as dirSimple } from '@/api/hmmm/directorys.js'
import { simple as tagSimple } from '@/api/hmmm/tags.js'
import { simple as usersSimple } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list as qusetList } from '@/api/hmmm/questions.js'
import dia from '../components/dia.vue'
export default {
  components: {
    dia
  },
  name: 'questions',
  data () {
    return {
      // 筛选表单关联的数据
      filterData: {
        page: 1, // 当前页数
        pagesize: 5, // 页尺寸
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 目录
      },
      subjectList: [], // 学科列表
      directorysList: [], // 二级目录
      tagsList: [], // 标签列表
      questionList: [{ id: 1, type: '单选' }, { id: 2, type: '多选' }, { id: 3, type: '简单' }], // 试题类型列表
      difList: [{ id: 1, type: '简单' }, { id: 2, type: '一般' }, { id: 3, type: '困难' }], // 试题类型列表
      directionList: ['o2o', '外包服务', '企业服务', '互联网金融', '企业咨询', '互联网', '电子商务', '其它'], // 方向列表
      usersList: [], // 录入人列表
      provincesList: provinces(), // 城市列表
      citysList: [], // 市区列表
      count: 0, // 总条数
      // 表格关联的数据
      tableData: [],
      currentPage4: 1, // 分页默认页码
      dialogVisible: false, // 对话框显示
      delDialogVisible: false, // 删除 功能对话框
      selectDialogVisible: false// 精选功能对话框
    }
  },
  created () {
    this.getUsersList()
    this.getTableData()
  },
  methods: {
    // 获取学科数据列表
    async getSubjects () {
      const { data } = await subSimple()
      // console.log(data)
      this.subjectList = data
    },
    // 获取学科成功后获取二级目录和获取标签
    async getDirectorys () {
      // 学科改变后改id自动清空
      this.filterData.catalogID = ''
      this.filterData.tags = ''
      const { data } = await dirSimple({ subjectID: this.filterData.subjectID })
      // console.log(data)
      this.directorysList = data
      // 获取标签列表
      const res = await tagSimple({ subjectID: this.filterData.subjectID })
      // console.log(res)
      this.tagsList = res.data
    },
    // 获取录入人列表
    async getUsersList () {
      const { data } = await usersSimple()
      // console.log(data)
      this.usersList = data
    },
    // 选择城市
    choseCity () {
      this.citysList = citys(this.filterData.province)
    },
    // 重置表单
    resetForm () {
      Object.assign(this.$data, this.$options.data())
      this.$refs.ruleForm.resetFields()
      this.getTableData()
    },
    // 根据条件筛选基础题库列表
    async search () {
      this.getTableData()
    },
    // 获取表格关联数据
    async getTableData () {
      const obj = {}
      // 遍历对象，筛选出来有数据的参数放在一个新对象里面进行 传参
      for (const key in this.filterData) {
        // console.log(key, this.filterData[key])
        if (this.filterData[key]) {
          obj[key] = this.filterData[key]
        }
      }
      console.log(obj)
      const { data } = await qusetList(obj)
      // console.log(data)
      this.count = data.counts
      this.tableData = data.items
    },
    // 改变每页条数或者当前页面的时候重新获取数据
    handleSizeChange (val) {
      this.filterData.pagesize = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.$nextTick(() => {
        this.filterData.page = val
        this.getTableData()
      })
    },
    // 修改功能
    change (id) {
      // console.log(id)
      this.$router.push({ path: '/questions/new', query: { id } })
    },
    // 删除功能
    render () {
      this.getTableData()
    },
    showDelDia (id) {
      this.delDialogVisible = true
      this.$refs.delDia.id = id
      // console.log(this.$refs.delDia.id)
    },
    // 加入精选功能
    check (id) {
      this.selectDialogVisible = true
      this.$refs.selectDia.id = id
    },
    // 预览功能
    view (type, row) {
      this.dialogVisible = true
      this.$refs.viewDia.questionType = type
      // console.log(row)
      this.$refs.viewDia.getDetail(row.id)
    }
  }
}
</script>

<style scoped lang='less'>

</style>
